/**
 * js 逻辑（登录）
 */
import { Form, Toast } from 'antd-mobile'

import { useDispatch } from 'react-redux'
import { loginAction } from '@/store/actions/login'
import { AppDispatch } from '@/store'
import { useLocation, useNavigate } from 'react-router-dom'
// 导入axios提供的错误类型
import { LoginFormData } from '@/types/data'
import { AxiosError } from 'axios'
import { useEffect, useRef, useState } from 'react'
import { InputRef } from 'antd-mobile/es/components/input'
import { getCodeApi } from '@/api/login'
export function useLogin() {
  const dispatch = useDispatch<AppDispatch>()
  const nav = useNavigate()
  const location = useLocation() as { state: { from: string } }
  // 获取表单实例
  const [form] = Form.useForm()
  // 获取手机号输入框实例对象
  const mobileRef = useRef<InputRef>(null)
  // 1. 提交登录
  const onFinish = async (formData: LoginFormData) => {
    console.log('formData:', formData)
    try {
      await dispatch(loginAction(formData))
      Toast.show({
        icon: 'success',
        content: '登录成功',
      })
      nav(location.state?.from || '/')
    } catch (error) {
      console.log(error)
      const _error = error as AxiosError<{ message: string }>
      Toast.show({
        icon: 'fail',
        content: _error.response?.data.message,
      })
    }
  }
  // 2. 发送验证码
  // 倒计时秒数
  const [count, setCount] = useState(0)
  // 存储定时器ID
  const timerId = useRef(0)
  const sendCode = async () => {
    /**
     * 发送验证码流程：
     * 1. 校验手机号格式：是否输入和格式是否正确 =》错误的话，让手机号输入框获取焦点
     *    通过：getFieldValue(name值)=》获取表单对应name的值 | getFieldError(name值)=》获取表单对应name格式错误
     * 2. 输入正确的话：调用后台接口（参数：手机号），调用运营商接口，发送短信
     * 3. 用户手机号收到短信，填写后进行登录
     */
    // 获取手机号
    const mobile = form.getFieldValue('mobile') || ''
    console.log('mobile:', mobile)
    // 获取手机号输入格式错误:string[]
    const isError = form.getFieldError('mobile').length > 0
    if (!mobile.trim() || isError) {
      console.log('mobileRef:', mobileRef)
      mobileRef.current!.focus()
      return
    }
    // 发短信
    try {
      await getCodeApi(mobile)
      /**
       * 开启倒计时流程：
       * 1. 倒计时状态：60s
       * 2. == 发送短信后：立即开启倒计时 ==
       * 3. 倒计时状态等于0：清除定时器
       */
      setCount(60)
      // window.setInterval 添加window属性调用，解决返回值类型错误问题
      timerId.current = window.setInterval(() => {
        // 这里通过回调函数语法执行减一，保证获取到正确的count
        setCount((ct) => ct - 1)
      }, 1000)
    } catch (error) {
      console.log(error)
    }
  }
  // 清理倒计时定时器：1. count === 0结束  2. 组件销毁
  useEffect(() => {
    if (count === 0) {
      clearInterval(timerId.current)
    }
  }, [count])
  useEffect(() => {
    return () => {
      clearInterval(timerId.current)
    }
  }, [])


  // 提供服务
  return { form, onFinish, mobileRef, count, sendCode }
}